{extend name="admin@index_layout"/}
{block name="main"}
<style>
    .layui-form-label {
        width: 130px !important;
    }

    .layui-form-item .layui-input-inline {
        width: 268px !important;
    }

    .item-upgrade .layui-input-inline, .item-ratio .layui-input-inline {
        width: 66px !important;
    }

    .number-input {
        text-align: center;
    }
</style>
<div class="layui-card">
    <div class="layui-card-body">
        <div class="layui-tab layui-tab-card">
            <div class="layui-tab-content">
                <form class="layui-form income-form" method="post" id="incomeForm">
                    <div class="layui-form-item">
                        <label class="layui-form-label">提现渠道</label>
                        <div class="layui-input-block">
                            {volist name="channel" id="v"}
                            <input lay-filter="type" type="radio" name="channel" value="{$key}" title="{$v}" {if
                                   $key==$info['type']}checked='' {/if}>
                            {/volist}
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">收款人姓名</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" type="text" name="name"
                                   value="" autocomplete="off" required/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">提现金额</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" type="number" name="money"
                                   value="0" autocomplete="off" min="0" max="{$info['total']}" step="0.01" required/>
                        </div>
                        <div class="layui-form-mid">可提现金额：{$info['total']}</div>
                    </div>

                    <div id="bank">
                        <div class="layui-form-item">
                            <label class="layui-form-label">银行名称</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" type="text" name="bankName" value="" autocomplete="off"/>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">银行卡号</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" type="text" name="cardNo" value="" autocomplete="off"
                                       onblur="handleBlur(this)"/>
                            </div>
                        </div>
                        <div class="layui-form-item layui-hide">
                            <label class="layui-form-label">银行地址</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" type="text" name="bankAddress" value="" autocomplete="off"/>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">银行预留手机号</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" type="text" name="phone" value="" autocomplete="off"/>
                            </div>
                        </div>
                        <input id="is_china" class="layui-input" type="hidden" name="is_china" value="1"
                               autocomplete="off"/>
                    </div>

                    <div id="code">
                        <div class="layui-form-item">
                            <label class="layui-form-label">收款码图片</label>
                            <div class="layui-input-inline item-image">
                                <div class="image">
                                </div>
                                <input type="hidden" class="layui-input QRCode-image" name="QRCode" value="">
                                <button class="layui-btn image-upload image-upload-0" lay-data="{accept: 'images'}">
                                    上传图片
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn " lay-submit="" lay-filter="incomeFormSubmit"
                                    target-form="income-form">提交
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    function handleBlur(event) {
        const cardNo = event.value;
        if (cardNo) {
            let url = '{:url("check")}' + '?cardNo=' + cardNo;
            $.get(url).success(function (res) {
                if (res.code !== 0) {
                    layer.msg(res.msg, {icon: 2, time: 1000});
                    return false;
                }
                let is_china = res.data;
                // 处理返回的数据
                $('#is_china').val(is_china);
            });
        }
    }

    layui.use(['element', 'form', 'upload'], function () {
        var form = layui.form, upload = layui.upload;

        form.on('radio(type)', function (data) {
            var type = data.value;
            hideOption(type)
        });

        hideOption(0)

        function hideOption(type) {
            if (parseInt(type) == 0) {
                $('#bank').show();
                $('#code').hide();
            } else {
                $('#bank').hide();
                $('#code').show()
            }
        }

        upload.render({
            elem: '.image-upload',
            url: '{:url("attachment/upload/upload", ["dir" => "images", "module" => "distribution"])}',
            done: function (res, index, upload) {
                var item = this.item, parent = item.parent();
                if (res.code == 0) {
                    var html = '<div class="file-item thumbnail"><img src="' + res.path + '" width="100" style="max-height: 100px;" ></div>';
                    parent.find('.image').html(html);
                    parent.find('.QRCode-image').val(res.id);
                }
            }
        });

        form.on('submit(incomeFormSubmit)', function (data) {
            var url = '{:url("withdrawal")}';
            $.post(url, $('.income-form').serialize()).success(function (res) {
                if (res.code === 0) {
                    layer.msg(res.msg, {time: 1000}, function () {
                        parent.closeAllLayers(true);
                    });
                } else {
                    layer.msg(res.msg, {time: 1000, icon: 2});
                }
            });
            return false;
        });
    });

    $(document).ready(function () {
        $('#incomeForm').on('submit', function (event) {
            // 获取触发提交的按钮
            const submitButton = $(this).find('button[type="submit"]');
            const clickedButton = $(event.originalEvent.submitter);

            // 检查触发提交的按钮是否为提交按钮
            if (!clickedButton.is(submitButton)) {
                event.preventDefault(); // 阻止表单提交
            }
        });
    });


</script>

{/block}
